<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 筛选条件
const filter = reactive({
  orderNo: '',
  leader: '',
  status: '',
  start: '',
  end: ''
});

// 统计
const stats = reactive({
  arrived: 1000,
  pending: 1000
});

// 表格数据
const tableData = ref<any[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);

// mock 数据
const mockList = [
  {
    time: '2021-01-31 12:93:20',
    leader: 'A-团长',
    expect: '50元',
    actual: '50元',
    orderNo: '1018093299763100074',
    status: '已到账',
    arriveTime: '2020-02-24 14:12:30'
  },
  {
    time: '2021-01-31 12:93:20',
    leader: 'A-团长',
    expect: '50元',
    actual: '50元',
    orderNo: '1018093299763100074',
    status: '已到账',
    arriveTime: '2020-02-24 14:12:30'
  },
  {
    time: '2021-01-31 12:93:20',
    leader: 'A-团长',
    expect: '50元',
    actual: '50元',
    orderNo: '1018093299763100074',
    status: '待到账',
    arriveTime: '-'
  }
];

function fetchTableData() {
  loading.value = true;
  setTimeout(() => {
    // 模拟筛选和分页
    let list = mockList.filter(item => {
      return (
        (!filter.orderNo || item.orderNo.includes(filter.orderNo)) &&
        (!filter.leader || item.leader.includes(filter.leader)) &&
        (!filter.status || item.status === filter.status)
      );
    });
    total.value = list.length;
    tableData.value = list.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
    loading.value = false;
  }, 300);
}

onMounted(fetchTableData);

function handleSearch() {
  currentPage.value = 1;
  fetchTableData();
}
function handleReset() {
  Object.assign(filter, { orderNo: '', leader: '', status: '', start: '', end: '' });
  currentPage.value = 1;
  fetchTableData();
}
function handlePageChange(val: number) {
  currentPage.value = val;
  fetchTableData();
}
function handleSizeChange(val: number) {
  pageSize.value = val;
  fetchTableData();
}
function handleExport() {
  ElMessage.success('导出成功（mock）');
}
</script>

<template>
  <div style="padding: 32px 0; background: #fafafa; min-height: 100vh;">
    <!-- 筛选区 -->
    <el-card style="margin: 0 auto; max-width: 1800px;">
      <el-form :inline="true" :model="filter" class="filter-form" style="margin-bottom: 12px; flex-wrap: wrap;">
        <el-form-item label="订单号">
          <el-input v-model="filter.orderNo" placeholder="请输入内容" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="团长">
          <el-input v-model="filter.leader" placeholder="请输入内容" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="账单时间">
          <el-date-picker
            v-model="filter.start"
            type="date"
            placeholder="开始时间"
            style="width: 130px;"
          />
          <span style="margin: 0 8px;">至</span>
          <el-date-picker
            v-model="filter.end"
            type="date"
            placeholder="结束时间"
            style="width: 130px;"
          />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="filter.status" placeholder="全部" style="width: 140px;">
            <el-option label="全部" value="" />
            <el-option label="已到账" value="已到账" />
            <el-option label="待到账" value="待到账" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">检索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="danger" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计 -->
    <el-card style="margin: 24px auto 0; max-width: 1800px;">
      <div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 12px;">
        <el-button type="primary" plain>已到账佣金 ￥{{ stats.arrived.toFixed(2) }}</el-button>
        <el-button type="primary" plain>待到账佣金 ￥{{ stats.pending.toFixed(2) }}</el-button>
      </div>
      <!-- 表格区 -->
      <el-table :data="tableData" border style="width: 100%;" :loading="loading">
        <el-table-column prop="time" label="商品订单时间" min-width="160" />
        <el-table-column prop="leader" label="团长" min-width="120" />
        <el-table-column prop="expect" label="预计佣金金额" min-width="120" />
        <el-table-column prop="actual" label="实际到账佣金" min-width="120" />
        <el-table-column prop="orderNo" label="对应订单号" min-width="180" />
        <el-table-column prop="status" label="状态" min-width="100" align="center" />
        <el-table-column prop="arriveTime" label="到账时间" min-width="160" />
      </el-table>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 16px;">
        <el-pagination
          background
          layout="prev, pager, next, jumper, ->, total, sizes"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
        />
        <span style="color: #d33; font-size: 15px;">当前条件共检索到 {{ total }} 条相关信息</span>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style>